/**
 * React的组件
 * 1、为什么要使用组件
    * 1)让组件更加具有复用性，大大提高开发效率
    * 2）让组件的代码可读性提高
    * 3）让组件更加容易维护和修改
    * 4）便于团队的协作开发
 * 2、React中创建组件
    * 1）使用ES6的class方式创建组件(react16.8之前)(设计思想和性能优化方案，鸿蒙开发)
    * 2）使用ES6的函数方式创建组件（react16.8之后）以这个为主(函数组件讲解为主)
 * 3、类组件创建的步骤
    * 1）创建一个后缀名为(js或者jsx)的文件
    * 2) 使用ES6的类的定义来创建一个类,然后该类要继承React.Component
    * 3) 必须要有个render函数，该函数是用来进行组件内容的渲染的
    * 4) render方法必须要有return返回值，返回值的内容就是一个JSX
    * 5) 使用ES6的默认导出class类组件
 * 4、使用组件
 *    1）使用ES6的import模块导入方式导入类组件
 *    2）使用<组件名></组件名>的方式使用组件
 */
import { Component } from 'react'
import { getMc } from './utils/tools'
export default class App extends Component {
    render() {
        let students = [
            {
                no: 1,
                name: '刘备',
                gender: 1,
                isGz: false
            },
            {
                no: 2,
                name: '貂蝉',
                gender: 0,
                isGz: true
            },
            {
                no: 3,
                name: '关羽',
                gender: 1,
                isGz: false
            }, {
                no: 4,
                name: '小乔',
                gender: 0,
                isGz: false
            }
        ]
        return (<>
            <table>
                <thead>
                    <tr>
                        <td>排名</td>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>备注</td>
                    </tr>
                </thead>
                <tbody>
                    {
                        students.map((item, index) => <tr key={index}>
                            <td><div className='item' style={getMc(item.no)}>{item.no}</div></td>
                            <td>{item.name}</td>
                            <td>
                                <img src={item.gender == 1 ? require('./assets/boy.jpg') : require('./assets/girl.png')} className='avatar'></img>
                            </td>
                            <td>{item.isGz && <div className='gz'>关</div>}</td>
                        </tr>)
                    }
                </tbody>
            </table>
        </>)

    }
}